<%@page import="com.xnx3.j2ee.util.SystemUtil"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:include page="/wm/common/head.jsp">
	<jsp:param name="title" value="登录"/>
</jsp:include>
<script>
//先把之前的token清空掉
wm.token.set('');
</script>
<style>
	*{color: #333;}
	html, body, div, span, object, iframe,  h1, h2, h3, h4, h5, h6, p, blockquote, pre,  abbr, address, cite, code,  del, dfn, em, img, ins, kbd, q, samp,  small, strong, sub, sup, var,  b, i,  dl, dt, dd, ol, ul, li,  fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td,  article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary,  time, mark, audio, video {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
	body {line-height: 1;background-color: #f7f7f7;}
	:focus {outline: 1;}
	article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary {display: block;}
	ul {list-style: none;}
	blockquote, q {quotes: none;}
	blockquote:before, blockquote:after,  q:before, q:after {content: '';content: none;}
	a {margin: 0;padding: 0;border: 0;font-size: 100%;vertical-align: baseline;background: transparent;text-decoration: none;color: #333;display: block;}
	ins {background-color: #ff9;color: #000;text-decoration: none;}
	mark {background-color: #ff9;color: #000;font-style: italic;font-weight: bold;}
	del {text-decoration: line-through;}
	abbr[title], dfn[title] {border-bottom: 1px dotted #000;cursor: help;}
	table {border-collapse: collapse;border-spacing: 0;}
	hr {display: block;height: 1px;border: 0;border-top: 1px solid #cccccc;margin: 1em 0;padding: 0;}
	input, select {vertical-align: middle;}
	.fl {float: left;}
	.fr {float: right;}.loobg
	/*body{padding: 1px 0;font-size: 0.24rem;padding: 1.1rem 0 1.25rem;}*/
	@media screen and (max-width: 800px){html, body {min-height: 100%;min-width: 100%;font-family: '微软雅黑';font-size: calc(100vw / 7.5);}}
	body{font-size: 0.24rem;padding: 0px 0;}
	input, textarea {border: none;}
	button,input{border: none;margin: 0;padding: 0;outline: none;background: none;}
	/*过渡动画*/
	.tra{
			transition: all .3s linear;
	   -moz-transition: all .3s linear;
	-webkit-transition: all .3s linear;
		 -o-transition: all .3s linear;
	}
	.clear{clear: both;}
	/*通用显示*/
	.displayblock{display: block;}

	
	
	
	
	.natob{
		background-color: #fff;
		box-shadow: 6px 5px 11px 0px #ededed;
		margin-bottom: 60px;
	}
	.nav{
		display: flex;
		justify-content: space-between;
		align-content: center;
		align-items: center;
		box-sizing: border-box;
		padding: 30px 0;
		margin: 0 auto;
		width: 100%;
		max-width: 1280px;
	}
	.nal{
		display: flex;
		align-content: center;
		align-items: center;
	}
	.nal img{
		width: 60px;
		height: 60px;
		margin-right: 10px;
		font-weight: 500;
	}
	.nal p{
		font-size: 24px;
		
	}
	.nar{
		display: flex;
		align-content: center;
		align-items: center;
	}
	.nar img{
		width: 24px;
		height: 24px;
		margin-right: 10px;
		font-weight: 500;
	}
	.nar p{
		font-size: 15px;
		color: #969696;
	}
	.bgt{
		background-color: #15bf98;
		height: 520px;
		position: relative;
	}
	.bshabox{
		height: 520px;
		position: relative;
		width: 100%;
		max-width: 1280px;
		margin: 0 auto;
	}
	.bsbtbox{
		height: 190px;
		width: 100%;
		max-width: 1280px;
		position: absolute;
		left: calc(50vw - 640px);
		top: 0;
		z-index: 10;
	}
	.bgb{
		height: 190px;
		background-color: #0ba88c;
		position: relative;
	}
	.ctnbox{
		position: relative;
		margin-bottom: 40px;
	}
	
	.touy1{
		background-color: #0ba588;
		position: absolute;
		width: 100px;
		height: 150px;
		z-index: 0;
		bottom: 0;
		right: 0px;
	}
	.shu{
		position: absolute;
		z-index: 1;
		width: 200px;
		bottom: 0;
	}
	.sh1{
		left: -50px;
	}
	.sh2{
		left: 45%;
	}
	.sh3{
		right: -10px;
	}
	.btbg{
		height: 80px;
		position: absolute;
		top: 0;
		right: 0px;
		width: 135px;
	}
	.dlk{
		position: absolute;
		background-color: #fff;
		bottom: -80px;
		right: 90px;
		border-radius: 16px;
		overflow: hidden;
		padding: 50px 40px 80px;
	}
	.che{
		position: absolute;
		height: 200px;
		z-index: 11;
		top: -155px;
		left: 220px;
	}
	.chvas{
		position: absolute;
		width: 280px;
		height: 45px;
		left: 280px;
	}
	.olad{
		position: absolute;
		left: calc(50vw - 640px);
		top: 0;
		z-index: 10;
	}
	.zhbox{
		width: 300px;
		height: 42px;
		border-radius: 6px;
		border: 1px solid #d9d9d9;
		margin-bottom: 40px;
		display: flex;
		justify-content: space-between;
	}
	.zhbox input{
		flex: 1;
		padding-left: 10px;
		width: 100%;
		font-size: 12px;
	}
	.zhanghao{
		width: 63px;
		display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
		background-color: #f1f1f1;
		flex: 0 0 auto;
	}
	.zhanghao img{
		width: 15px;
	}
	.dltl{
		font-size: 24px;
		text-align: center;
		font-weight: 600;
		margin-bottom: 40px;
	}
	.btnbs{
		background-color: #10b18d;
		border-radius: 6px;
		display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
		font-size: 18px;
		color: #fff;
		line-height: 18px;
		width: 300px;
		height: 42px;
	}
	.yzm{
		flex: 0 0 auto;
		padding: 14px 20px;
		font-size: 14px;
		line-height: 14px;
		color: #fff;
		background-color: #10b18d;
		height: 100%;
    	text-align: center;
    	display: flex;
    	justify-content: center;
    	padding: 14px 0px;
	}
	.dlk .yzm{
    	padding: 14px 0px;
	}
.myForm{
	margin: 0 auto;
    width: 495px;
    height: 360px;
    border-width: 1px 1px 1px 1px;
    padding: 0px;
    border-radius: 20px;
    overflow: hidden;
    -webkit-box-shadow: 0 0 10px #e2e2e2;
    -moz-box-shadow: 0 0 10px #e2e2e2;
    box-shadow: 0 0 10px #e2e2e2;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -248px;
    margin-top: -181px;
}

@media screen and (max-width:600px){
	.myForm{
		margin: 0 auto;
	    width: 100%;
	    height: 100%;
	    border-width: 0px;
	    padding: 0px;
	    border-radius: 0px;
	    overflow: auto;
	    -webkit-box-shadow: 0 0 0px #e2e2e2;
	    -moz-box-shadow: 0 0 0px #e2e2e2;
	    box-shadow: 0 0 0px #e2e2e2;
	    position: static;
	    left: 0px;
	    top: 0px;
	    margin-left: 0px;
	    margin-top: 0px;
	}
}

.touming{
	background: rgba(0,190,150,0.1) none repeat scroll !important;
}
.baisetouming{
	background: rgba(250,250,250,0.1) none repeat scroll !important;
}
</style>

<div class="natob">
	<div class="nav">
		<div class="nal">
			<img src="/js/images/LG.png" alt="">
			<p>斑马回收服务商登录</p>
		</div>
		<div class="nar">
			<img src="/js/images/DH.png" alt="">
			<p>400-616-0732</p>
		</div>
	</div>
</div>


<div class="ctnbox">
	<div class="bgt">
		<div class="bshabox">
			<div class="touy1"></div>
			<img class="shu sh1" src="/js/images/shu.png" alt="">
			<img class="shu sh2" src="/js/images/shu.png" alt="">
			<img class="shu sh3" src="/js/images/shu.png" alt="">
		</div>
	</div>
	<div class="bgb">
		<div class="bsbtbox">
			<img class="btbg" src="/js/images/dltouy.png" alt="">
		</div>
		
		<div class="bsbtbox">
			<img class="che" src="/js/images/chenew.png" alt="">
			<img class="chvas" src="/js/images/ctouy.png" alt="">
		</div>
	</div>
	<div class="bshabox olad">
		<div class="dlk">
			<div class="dltl">斑马回收账号登录</div>
			<div class="zhbox">
				<div class="zhanghao">
					<img src="/js/images/zh.png" alt="">
				</div>
				<input type="text" name="phone" id="phone" required  lay-verify="required" placeholder="请输入您的手机号" autocomplete="off">
			</div>
			<div class="zhbox">
				<div class="zhanghao">
					<img src="/js/images/yzm.png" alt="">
				</div>
				<input type="text" name="code" id="code" required lay-verify="required" placeholder="右侧获取手机验证码" autocomplete="off">
				<input class="layui-btn layui-btn-sm layui-btn-primary yzm" type="button" id="btn" onclick="getPhoneCode();" value="获取验证码">
			</div>
			<div class="btnbs" onclick="login();">立即登录</div>
		</div>
	</div>
</div>

<!-- 背景

<form class="layui-form layui-elem-quote layui-quote-nm myForm">
  <div class="layui-form-item touming" style="height: 70px;background-color: #eeeeee;line-height: 70px;text-align: center;font-size: 25px;color: #3F4056;">
    <%=SystemUtil.get("SITE_NAME") %> 登陆
  </div>
  <div style="padding: 30px 50px 40px 0px;">
  	<div class="layui-form-item">
	    <label class="layui-form-label">手机号</label>
	    <div class="layui-input-block">
	      <input type="text" name="phone" id="phone" required  lay-verify="required" placeholder="请输入您的手机号" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">验证码</label>
	    <div class="layui-input-inline">
	      <input type="text" name="code" id="code" required lay-verify="required" placeholder="右侧获取手机验证码" autocomplete="off" class="layui-input">
	    </div>
	    <div class="layui-form-mid layui-word-aux" style="padding-top: 3px;padding-bottom: 0px; padding-left:5px;">
			<input class="layui-btn layui-btn-sm layui-btn-primary" type="button" id="btn" value="获取验证码" onclick="getPhoneCode();"/> 
		</div>
	  </div>
	  <div class="layui-form-item" style="display:none">
	    <label class="layui-form-label">记住密码</label>
	    <div class="layui-input-block">
	      <input type="checkbox" name="switch" lay-skin="switch">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <div class="layui-input-block">
	      <a class="layui-btn" style="opacity:0.6; margin-right: 50px;" onclick="login();">立即登陆</a>
	      <button type="reset" class="layui-btn layui-btn-primary baisetouming" style="width: 90px;">重置</button>
	    </div>
	  </div>
  </div>
</form> -->
 <div id="divCode" style="display:none;">
	<div class="layui-form-item" style="padding-left:13px; padding-top:16px;">
	    <div class="layui-input-inline">
	    	<input type="text" name="imgCode" placeholder="请输入右侧验证码" class="layui-input" id="thisIdIsimgCode" />
	    </div>
	    <div class="layui-form-mid layui-word-aux" style="padding-top: 3px;padding-bottom: 0px;">
	    	<img id="thisIdIsimgCodeImage"  onclick="reloadCode();" style="height: 29px;width: 110px; cursor: pointer;" />
	    </div>
	</div>
</div>
<!--[if IE]>
	<div style="position: absolute;bottom: 0px;padding: 10px;text-align: center;width: 100%;background-color: yellow;">建议使用<a href="https://www.baidu.com/s?wd=Chrome" target="_black" style="text-decoration:underline">Chrome(谷歌)</a>、<a href="https://www.baidu.com/s?wd=Firefox" target="_black" style="text-decoration:underline">Firefox(火狐)</a>浏览器，IE浏览器会无法操作！！！</div>
<![endif]-->
<script>
//重新加载验证码
function reloadCode(){
	var code=document.getElementById('code');
	code.setAttribute('src','/wm/login/sendSmsCode.json?token='+wm.token.get()+'&time='+new Date().getTime());
	//这里必须加入随机数不然地址相同我发重新加载
}

/**
 * 点击登录按钮后执行登录操作
 */
function login(){
	var phone = document.getElementById('phone').value;
	var code = document.getElementById('code').value;
	
 	if(phone.length == 0){
		msg.failure('请输入手机号');
		return;
	}
	if(code.length == 0){
		msg.failure('请输入验证码');
		return;
	} 
	
	msg.loading('登录中');
	wm.post('/wm/login/login.json',{"phone":phone, "code":code},function(data){
		msg.close();    //关闭“更改中”的等待提示
		if(data.result != '1'){
			msg.failure(data.info);
			//登录失败，那么验证码也已经使用过了，重新刷新验证码
			reloadCode();
		}else{
			//登录成功
			msg.success('登录成功', function(){
				window.location.href='/'+data.info;
			});
		}
	});
}
//获取手机验证码
function getPhoneCode(){
	//判断手机号是否是11位
	if(document.getElementById('phone').value.length!=11){
		layer.tips('请输入您的11位手机号', '#phone', {
		  tips: [1, '#3595CC'],
		  time: 3000
		});
		return;
	}
	//倒计时事件
	var obj = $("#btn");
	settime(obj);
	msg.loading('发送中');
	$.post("/wm/login/sendSmsCode.json?&phone="+document.getElementById('phone').value, function(data){
		msg.close();
		if(data.result == '1'){
			layer.closeAll();
			msg.success('已发送');
	 	}else if(data.result == '0'){
	 		msg.failure(data.info);
	 	}else{
	 		msg.failure('操作失败');
	 	}
	});
	
	if(true){
		return;
	}
	
}
//设置倒计时时间
var countdown=60; 
function settime(obj) { //发送验证码倒计时
    if (countdown == 0) { 
        obj.attr('disabled',false); 
        //obj.removeattr("disabled"); 
        obj.val("重新获取验证码");
        countdown = 60; 
        return;
    } else{ 
        obj.attr('disabled',true);
        obj.val("重新发送(" + countdown + ")");
        countdown--; 
    }
setTimeout(function() { 
    settime(obj) }
    ,1000) 
}
//调用接口获取一个新的token，也就是相当于获取一个Session id
post('/wm/login/getToken.json',{},function(data){
	wm.token.set(data.info);
	reloadCode();
});

//get方式传递过来的用户名跟密码
try{
	document.getElementById('phone').value=getUrlParams('phone');
	document.getElementById('code').value=getUrlParams('code');
/* 	document.getElementById('password').value=getUrlParams('password'); */
}catch(e){console.log(e);}
</script>

</body>
</html>